<style lang="less">
</style>
<template>
  <div style="display: flex; position: relative">
    <Form
      ref="smsForm"
      :model="sms"
      :label-width="110"
      label-position="left"
      :rules="smsValidate"
    >
      <FormItem label="服务提供商" prop="serviceName">
        <Select
          v-model="sms.serviceName"
          @on-change="changeSms"
          placeholder="请选择"
          style="width: 230px"
        >
          <Option value="ALI_SMS">阿里云</Option>
          <Option value="TENCENT_SMS">腾讯云</Option>
        </Select>
      </FormItem>
      <FormItem label="accessKey" prop="accessKey">
        <Input
          type="text"
          v-model="sms.accessKey"
          placeholder="请输入accessKey/secretId"
          :disabled="changeLoading"
          style="width: 380px"
        />
      </FormItem>
      <FormItem label="secretKey" prop="secretKey">
        <Tooltip placement="right" content="无法编辑时请先点击查看图标">
          <Input
            class="input-see"
            type="text"
            v-model="sms.secretKey"
            :readonly="!changedSmsSK"
            @on-click="seeSecret(sms.serviceName)"
            :disabled="changeLoading"
            icon="ios-eye"
            placeholder="请输入secretKey"
            style="width: 380px"
          />
        </Tooltip>
      </FormItem>
      <FormItem
        v-if="sms.serviceName == 'TENCENT_SMS'"
        label="应用ID"
        prop="appId"
      >
        <Input
          type="text"
          v-model="sms.appId"
          :disabled="changeLoading"
          placeholder="请输入应用ID（短信控制台-应用管理）"
          style="width: 380px"
        />
      </FormItem>
      <FormItem label="短信签名" prop="signName">
        <Input
          type="text"
          v-model="sms.signName"
          :disabled="changeLoading"
          placeholder="请输入短信签名，例如XBoot"
          style="width: 380px"
        />
      </FormItem>
      <FormItem label="使用场景" prop="type">
        <Select
          v-model="sms.type"
          @on-change="changeSmsType"
          :disabled="changeLoading"
          placeholder="请选择"
          style="width: 380px"
          transfer
        >
          <Option value="0">通用验证码</Option>
          <Option value="1">注册</Option>
          <Option value="2">登录</Option>
          <Option value="3">修改绑定手机号</Option>
          <Option value="4">修改密码</Option>
          <Option value="5">重置密码</Option>
          <Option value="6">工作流消息</Option>
        </Select>
      </FormItem>
      <FormItem label="模版CODE/ID" prop="templateCode">
        <Input
          type="text"
          v-model="sms.templateCode"
          :disabled="changeLoading"
          placeholder="请输入场景对应短信模版CODE/ID，如SMS_123456789"
          style="width: 380px"
        />
      </FormItem>
      <FormItem>
        <Button
          type="primary"
          style="width: 100px"
          :disabled="changeLoading"
          :loading="saveLoading"
          @click="saveEditSms"
          >保存更改</Button
        >
      </FormItem>
    </Form>
    <Spin fix v-if="loading"></Spin>
  </div>
</template>

<script>
import {
  checkSmsSet,
  seeSecretSet,
  getSmsSet,
  editSmsSet,
  getSmsTemplateCode,
} from "@/api/index";
export default {
  name: "sms",
  data() {
    return {
      loading: false, // 表单加载状态
      changeLoading: false,
      saveLoading: false,
      sms: {
        serviceName: "ALI_SMS",
        accessKey: "",
        secretKey: "",
        appId: "",
        signName: "",
        type: "",
        templateCode: "",
      },
      changedSmsSK: false, // 是否修改短信的secrectKey
      smsValidate: {
        // 表单验证规则
        serviceName: [{ required: true, message: "请选择", trigger: "change" }],
        accessKey: [{ required: true, message: "不能为空", trigger: "change" }],
        secretKey: [{ required: true, message: "不能为空", trigger: "change" }],
        appId: [{ required: true, message: "不能为空", trigger: "change" }],
        signName: [{ required: true, message: "不能为空", trigger: "change" }],
        type: [{ required: true, message: "不能为空", trigger: "change" }],
        templateCode: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    init() {
      this.initSmsSet();
    },
    initSmsSet() {
      this.loading = true;
      checkSmsSet().then((res) => {
        if (res.success && res.result) {
          let sms = res.result;
          getSmsSet(sms).then((res) => {
            this.loading = false;
            if (res.result) {
              // 转换null为""
              for (let attr in res.result) {
                if (res.result[attr] == null) {
                  res.result[attr] = "";
                }
              }
              this.sms = res.result;
              this.sms.type = "0";
              this.changeSmsType(this.sms.type);
            } else {
              this.changedSmsSK = true;
            }
          });
        } else {
          this.loading = false;
          this.changedSmsSK = true;
        }
      });
    },
    changeSms(v) {
      this.changeLoading = true;
      getSmsSet(v).then((res) => {
        this.changeLoading = false;
        if (res.result) {
          // 转换null为""
          for (let attr in res.result) {
            if (res.result[attr] == null) {
              res.result[attr] = "";
            }
          }
          this.sms = res.result;
          this.changedSmsSK = false;
          this.sms.type = "0";
          this.changeSmsType(this.sms.type);
        } else {
          this.sms = { serviceName: v };
          this.sms.type = "0";
          this.changedSmsSK = true;
        }
      });
    },
    seeSecret(name) {
      if (!name) {
        return;
      }
      seeSecretSet(name).then((res) => {
        if (res.success) {
          this.sms.secretKey = res.result;
          this.changedSmsSK = true;
        }
      });
    },
    changeSmsType(v) {
      getSmsTemplateCode(this.sms.serviceName, v).then((res) => {
        if (res.success) {
          this.sms.templateCode = res.result;
        }
      });
    },
    saveEditSms() {
      this.$refs.smsForm.validate((valid) => {
        if (valid) {
          this.saveLoading = true;
          this.sms.changed = this.changedSmsSK;
          editSmsSet(this.sms).then((res) => {
            this.saveLoading = false;
            if (res.success) {
              this.$Message.success("保存成功");
            }
          });
        }
      });
    },
  },
  mounted() {
    this.init();
  },
};
</script>